// 产品列表
<template>
  <div class="container">

    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav></goods-nav>

    <div class="w1200">
      <div class="navLeft">
        <el-tree
          accordion
          ref="treeBox"
          :data="data"
          node-key="id"
          :highlight-current="true"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :default-expanded-keys="defaultKeys"
        ></el-tree>
      </div>

      <div class="detailsRight">
        <div class="w972">
          <navigation-record></navigation-record>
          <div v-loading="Loading2">
            <div class="screen">
              <list-screen
                @pageinit="pageinit"
                :pagechange="changePage"
                :nav="nav"
                :initBrandChecked="initBrandChecked"
                :handleNodeClickId="handleNodeClickId"
              ></list-screen>
            </div>
            <list-floor
              @pagechange="pagechange"
              :pageInit="pageInit"
              v-loading="$store.state.listLoading"
            ></list-floor>
          </div>
        </div>
      </div>
    </div>

    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>
<script>
import navigationRecord from "./components/NavigationRecord"// 首页上面的 商品导航 标记在哪里点击进来的
import listFloor from "./components/ListFloor" // 商品分类 的 楼层组件
import listNav from "./components/ListNav" // 商品分类 的 导航组件
import listScreen from "./components/Screen" // 筛选组件
import goods from "../../assets/images/goods1.png" // 图片
export default {
  name: "productList",

  data() {
    return {
      initBrandChecked: 0,  // 用来清除品牌信息和勾选信息
      changePage: 1,  // 
      pageInit: 1,  // 页面点击左侧导航后 初始化为1
      handleNodeClickId: '',  // tree的ID
      Loading2: false,
      nav: [], // 存放品牌按钮的文字
      defaultKeys: [], // 初始化 展开的tree
      clicked: true,  // 点击后显示筛选的页面
      page: 1,        // 商品列表的分页 传递给穿商品列表页面
      navLeftShow: false,
      goodsNav: "商品分类",
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    }
  },

  methods: {

    // screen子组件激发父组件的函数    分页bug修复
    pageinit() {
      this.pageInit = Math.random()
      this.changePage = 1
    },

    // listFloor 点击了 分页的列表
    pagechange(page) {
      console.log(`分页点击事件激发父组件的函数触发。。。。。。页数：${page}`)
      this.changePage = page
    },

    // 获取商品列表
    async goodsListInit(page = 1) {
      let id = this.$store.state.listId
      let myGoodsList = await this.$http({
        method: "post",
        url: "index/api/goodsByCateId",
        data: {
          id,
          page
        }
      })
      if (myGoodsList.data.State.Code == 200) {
        this.$store.commit("productListfloor", myGoodsList.data)
        this.page = myGoodsList.data.page
      } else if (myGoodsList.data.State.Code == 2005) {
        this.$store.commit("productListfloor", [])
        this.page = myGoodsList.data.page
      }
      this.Loading2 = false
    },

    // Tree 数据初始化
    myTree() {
      const id = this.$route.params.id || this.$store.state.ListTreeId
      this.data = this.$store.state.bannernav
      this.defaultKeys = [id, 1]
      // console.log(this.defaultKeys)
      // treeBox 元素的ref   value 绑定的node-key
      this.$nextTick(() => {
        this.$refs.treeBox.setCurrentKey(id)
      })
      if (this.data.children) {
        // 展开 筛选
        this.clicked = true
      } else {
        this.clicked = false
      }
      let myInitGoods = {}
      if (this.$route.params.id) {
        myInitGoods = {
          id,
          name: this.$route.params.item.name,
          desc: this.$route.params.item.desc,
          pid: this.$route.params.item.pid
        }
      } else {
        myInitGoods = this.$store.state.HandleNodeClick
      }
      this.handleNodeClick(myInitGoods)
    },

    // 组件树的点击事件
    async handleNodeClick(data) {
      this.$store.commit('HandleNodeClick', data)
      // 清除品牌信息  清除check的信息  开始
      this.initBrandChecked = Math.random()
      // 清除品牌信息  清除check的信息  结束
      this.pageInit = Math.random()
      this.handleNodeClickId = data.id
      this.$store.commit('ListTreeId', data.id)
      this.changePage = 1   // 分页的修复 尝试

      if (!data.children) {
        this.Loading2 = true
        console.log(data)
        let id = data.id || this.$store.state.listId
        this.$store.commit("listId", data.id)
        this.$http({
          method: "post",
          url: "index/web/getBrandsAndSkus",
          data: {
            id
          }
        })
          .then(res => {
            if (res.data.State.Code == 200) {
              this.clicked = false  // 頁面的切換
              // 品牌的有无开始
              if (res.data.data.brands.length) {
                this.nav = res.data.data.brands
              } else {
                this.nav = []
              }
              // 品牌的有无结束

              // 规格型号开始
              let _list = res.data.data.skus
              if (_list) {
                _list.map(element => {
                  element.checkList = []
                })
                this.$store.commit("selectList", _list)
              } else {
                this.$store.commit("selectList", [])
              }

              // 规格型号结束
            } else if (['2003', '2004', '2005'].includes(res.data.State.Code)) {
              this.clicked = true  // 頁面的切換
              this.nav = []  // 品牌的种类
              this.$store.commit("selectList", [])  // 规格的种类
            }
            this.Loading2 = false
            this.$store.commit('listLoading', false)
          })
          .catch(err => {
            console.log(err)
          })
        this.goodsListInit()
        document.documentElement.scrollTop = 0
      }
    },

    // 上一页 下一页  开始
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
    // 上一页 下一页 结束
  },

  components: {
    navigationRecord,
    listFloor,
    listNav,
    listScreen
  },

  mounted() {
    this.myTree()
    console.log('mounted 触发')
  }
}
</script>
<style lang="scss" scoped>
.container {
  .w1200 {
    width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: row;
    .navLeft {
      .w1920k {
        position: fixed;
        top: 108px;
        .showk {
          .classification {
            width: 212px;
            height: 38px;
            line-height: 38px;
            color: #ffffff;
            background-color: #0a83e7;
            font-size: 16px;
            span:first-child {
              padding: 0 14px;
              font-size: 16px;
            }
            span:last-child {
              font-weight: 600;
              letter-spacing: 1px;
              cursor: pointer;
            }
          }
        }
      }
      .el-tree {
        width: 212px;
        background: #efefef;
        /deep/ .el-tree-node__label {
          font-weight: 800;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .detailsRight {
      width: 988px;
      border-top: 2px #dddddd solid;
      .w972 {
        width: 972px;
        height: 10px;
        margin-left: 16px;
        height: auto;
        .block {
          margin: 40px 0px 40px 216px;
        }
      }
    }
  }
}
</style>


